<template>
  <div class="hospital">
    <!-- 侧边栏区域 -->
    <div class="left">
      <!-- 侧边栏区域：顶部按钮 -->
      <div class="top">
        <el-radio-group v-model="isCollapse">
          <el-radio-button size="small" :value="true"></el-radio-button>
          <el-radio-button size="small" :value="false"></el-radio-button>
        </el-radio-group>
      </div>
      <!-- 侧边栏区域：底部菜单 -->
      <div class="bottom">
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isCollapse">
          <el-menu-item index="/hospital/register" @click="changeActive('/hospital/register')">
            <el-icon><Menu /></el-icon>
            <template #title>预约挂号丶动次打次</template>
          </el-menu-item>
          <el-menu-item index="/hospital/detail" @click="changeActive('/hospital/detail')">
            <el-icon><document /></el-icon>
            <template #title>医院详情丶动次打次</template>
          </el-menu-item>
          <el-menu-item index="/hospital/notice" @click="changeActive('/hospital/notice')">
            <el-icon><setting /></el-icon>
            <template #title>预约通知丶动次打次</template>
          </el-menu-item>
          <el-menu-item index="/hospital/close" @click="changeActive('/hospital/close')">
            <el-icon><InfoFilled /></el-icon>
            <template #title>停诊信息丶动次打次</template>
          </el-menu-item>
          <el-menu-item index="/hospital/search" @click="changeActive('/hospital/search')">
            <el-icon><Search /></el-icon>
            <template #title>查询详情丶动次打次</template>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon><Document /></el-icon>
            <template #title>备选菜单丶动次打次</template>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon><Document /></el-icon>
            <template #title>备选菜单丶动次打次</template>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon><Document /></el-icon>
            <template #title>备选菜单丶动次打次</template>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <!-- 主体区域 -->
    <div class="right">
      <!-- 子组件展示结构地方 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import useDetailStore from "@/store/modules/hospitalDetail";
//折叠面板
const isCollapse = ref(false);
//获取仓库对象
let detailStore = useDetailStore();
//获取路由器
let $router = useRouter();
//获取当前路由的信息
let $route = useRoute();
//左侧菜单点击事件的回调
const changeActive = (path: string) => {
  //跳转到对应二级路由
  $router.push({ path, query: { hoscode: $route.query.hoscode } });
};

//组件挂载完毕:通知pinia仓库发请求获取医院详情的数据，存储仓库当中
onMounted(() => {
  //获取医院详情的数据
  detailStore.getHospital($route.query.hoscode as string);
  //获取某一个医院科室的数据
  detailStore.getDeparment($route.query.hoscode as string);
});
</script>

<style scoped lang="scss">
.hospital {
  display: flex; //(display: flex;)/(float: left;)/(display: inline-block;)

  .left {
    // flex: 1;
    color: #333333;

    .top {
      height: 56px;
      display: flex; //(display: flex;)/(float: left;)/(display: inline-block;)
      justify-content: center;
      align-items: center;
    }
  }

  .right {
    flex: 1;
    color: #333333;
  }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

/** 深度选择器：>>>和/deep/和::v-deep与:deep */
:deep(.el-menu) {
  border-right: none !important; /* 使用 !important 确保覆盖默认样式 */
  background-color: #f4f4f4;
}
</style>
